<template>
  <div class="repairsnum">
    <el-table :data="repairsList" style="width: 100%" :border="true" :highlight-current-row="true">
      <el-table-column label="序号" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.repair_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户ID" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.appuser_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="110" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.appuser_name }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" width="220" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.repair_starttime }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" width="220" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.repair_endtime }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="报修类型" width="220" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.repair_type }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="报修原因" header-align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.repair_concent }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="维修状态" align="center" width="150">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.repair_state }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" header-align="center" width="150">
        <template slot-scope="scope">
          <!-- <el-button size="medium" type="success" @click="UserEdit(scope.row)">编辑</el-button>
          <el-button size="medium" type="danger" @click="UserDelete(scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-col :span="24" class="toolbar" style="text-align:center;">
      <el-pagination
        background
        :current-page="currentPage"
        :page-count="pageNum"
        :page-size="pagesize"
        style="margin-top:30px;margin-bottom:30px"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </div>
</template>
<script>
import request from '@/utils/request'
import { Message, popconfirm } from 'element-ui'
import { getToken, getAccount } from '@/utils/auth'
export default {
  data() {
    return {
      repairsList: [],
      currentPage: 1, // 初始页
      pagesize: 10, // 当前页面内的列表行数
      pageNum: 1, // 总数页数
      total: 0
    }
  },
  mounted() {
    this.getAll()
  },
  methods: {
    // 当前页
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize
      this.getAll()
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getAll()
    },
    // 获取列表
    getAll() {
      return request({
        url: '/v3/repair/state/list',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: {
          current_page: this.currentPage,
          page_size: this.pagesize,
          rule_id: 0
        }
      }).then(res => {
        this.currentPage = res.current_page
        this.pageNum = res.pages
        this.total = res.total_record
        this.repairsList = []
        res.repair.map((value, index) => {
          if (value.repair_state === 0) {
            value.repair_state = '已修复'
          } else if (value.repair_state === 1) {
            value.repair_state = '未修复'
          }
          // 转换时间格式
          var d = new Date(value.repair_endtime)
          value.repair_endtime =
            d.getFullYear() +
            '-' +
            (d.getMonth() + 1) +
            '-' +
            d.getDate() +
            ' ' +
            d.getHours() +
            ':' +
            d.getMinutes() +
            ':' +
            d.getSeconds()
          var t = new Date(value.repair_starttime)
          value.repair_starttime =
            t.getFullYear() +
            '-' +
            (t.getMonth() + 1) +
            '-' +
            t.getDate() +
            ' ' +
            t.getHours() +
            ':' +
            t.getMinutes() +
            ':' +
            t.getSeconds()
        })
        this.repairsList = res.repair
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.repairsnum {
  margin-top: 50px;
  overflow: hidden;
}
</style>
